<!DOCTYPE html5>
<head>
	<link href='http://fonts.googleapis.com/css?family=VT323' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Geo' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" type="text/css" href="css/popup.css">
	<script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
	<script src="js/jquery-ui-1.8.11.custom.min.js" type="text/javascript"></script>
	<script src="js/popup.js" type="text/javascript"></script>
</head>

<body>
    <div class="pf-settings">
		<ul>
			<li><input type="text" maxlength="7" id="pf-xCoord"/><div><a class="pf-up" href="#">&Delta;</a><a class="pf-down" href="#">&nabla;</a></div></li>
			<li><input type="text" maxlength="7" id="pf-yCoord"/><div><a class="pf-up" href="#">&Delta;</a><a class="pf-down" href="#">&nabla;</a></div></li>
			<li><input type="text" maxlength="7" id="pf-width"/><div><a class="pf-up" href="#">&Delta;</a><a class="pf-down" href="#">&nabla;</a></div></li>
			<li><input type="text" maxlength="7" id="pf-height"/><div><a class="pf-up" href="#">&Delta;</a><a class="pf-down" href="#">&nabla;</a></div></li>
			<li><input type="text" maxlength="7" id="pf-zIndex"/><div><a class="pf-up" href="#">&Delta;</a><a class="pf-down" href="#">&nabla;</a></div></li>
			<li><input type="text" maxlength="7" id="pf-alpha"/><div><a class="pf-up" href="#">&Delta;</a><a class="pf-down" href="#">&nabla;</a></div></li>
			<li class="pf-crop"><a href="#">crop</a></li>
			<li><input type="text" maxlength="7" id="pf-cxCoord"/><div><a class="pf-up" href="#">&Delta;</a><a class="pf-down" href="#">&nabla;</a></div></li>
			<li><input type="text" maxlength="7" id="pf-cyCoord"/><div><a class="pf-up" href="#">&Delta;</a><a class="pf-down" href="#">&nabla;</a></div></li>
			<li><input type="text" maxlength="7" id="pf-cWidth"/><div><a class="pf-up" href="#">&Delta;</a><a class="pf-down" href="#">&nabla;</a></div></li>
			<li><input type="text" maxlength="7" id="pf-cHeight"/><div><a class="pf-up" href="#">&Delta;</a><a class="pf-down" href="#">&nabla;</a></div></li>
		</ul>
	</div>
	<div class="pf-picListMask">
		<ul>
			
			<li>
				<div class="pf-visible"></div>
				<div class="pf-path">http://media.smashingmagazine.com/cdn_smash/images/pixel-art/pixel-art-23.jpg</div>
				<img class="pf-thumb" src="http://media.smashingmagazine.com/cdn_smash/images/pixel-art/pixel-art-23.jpg" alt=""/>
				<div class="pf-delete"></div>
			</li>
			<li>
				<p>select an image or load a new one</p>
				<form>
					<select>
  						<option value="volvo">Volvo</option>
  						<option value="saab">Saab</option>
  						<option value="mercedes">Mercedes</option>
  						<option value="audi">Audi</option>
					</select>
					<input type="text" id="pf-newFile"/>
					<a href="#" id="pf-loadButton">load</a>
				</form>
			</li>
		</ul>
	</div>
</body>
</html>
